<template>
    <h2 style="text-align:center">采购定价</h2>
    <div style="background-color:gainsboro">
        <br>
        <el-form ref="ruleFormRef" style="text-align:center" :model="ruleForm" :rules="rules" class="demo-ruleForm"
            :size="formSize" status-icon>

            <table style="width:100%;text-align:center">
                <tr style="text-align:center">
                    <td>
                        <el-form-item label="单据编号" prop="peDocumentsNumber">
                            <el-input v-model="ruleForm.dto.peDocumentsNumber" />
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="定价人员" prop="pePricingPeople">
                            <el-input v-model="ruleForm.dto.pePricingPeople" />
                        </el-form-item>
                    </td>
                    <td>
                        <el-form-item label="询价人员" prop="peInquiryClerk">
                            <el-input v-model="ruleForm.dto.peInquiryClerk" />
                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td>
                        <el-form-item label="询价日期" prop="peInquiryDate">
                            <el-input type="date" v-model="ruleForm.dto.peInquiryDate" />
                        </el-form-item>
                    </td>
                </tr>
            </table>
        </el-form>
        <br>
    </div>
    <br>

    <el-divider />
    <h2>询价产品</h2>
    <div>
        <el-table :data="tableDatas" style="width: 100%">
            <el-table-column prop="PName" label="产品名称">
                <template v-slot="scop">
                    <el-input v-if="scop.row.PName == ''" v-model="tableAdd.PName"
                        @dblclick="dialogProductTypeSelect = true"></el-input>
                    <span v-else>{{ scop.row.PName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="PNumber" label="产品编号">
                <template v-slot="scop">
                    <el-input v-if="scop.row.PNumber == ''" v-model="tableAdd.PNumber"></el-input>
                    <span v-else>{{ scop.row.PNumber }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="PENum" label="产品数量">
                <template v-slot="scop">
                    <el-input v-if="scop.row.PENum == ''" v-model="tableAdd.PENum"></el-input>
                    <span v-else>{{ scop.row.PENum }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="PEPrice" label="产品单价">
                <template v-slot="scop">
                    <el-input v-if="scop.row.PEPrice == ''" v-model="tableAdd.PEPrice"></el-input>
                    <span v-else>{{ scop.row.PEPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="PETaxRate" label="税率">
                <template v-slot="scop">
                    <el-input v-if="scop.row.PETaxRate == ''" v-model="tableAdd.PETaxRate"></el-input>
                    <span v-else>{{ scop.row.PETaxRate }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <br>
    <el-divider />
    <!-- <div style="height: 50px;">
        <el-button round @click="addhang()">新增行</el-button>
    </div> -->
    <!-- 产品表格 -->
    <table border="1" style="border-collapse: collapse; width: 100%; height: 40px;">
        <thead>
            <tr>
                <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll" style="width: 30px;" /></th>
                <th style="height: 40px;">序号</th>
                <th>供应商名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>交货日期</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in check1" :key="index">
                <td><input type="checkbox" v-model="ids" style="width: 30px;width: 100%;" /></td>
                <td style=" text-align: center;">{{ index + 1 }}</td>
                <td><input v-model="item.vName" type="text" style="height: 40px; width: 100%;text-align: center;"
                        @dblclick="dialogVisible3 = true" />
                </td>
                <td><input v-model="item.rPNum" type="text" style="height: 40px;width: 100%;text-align: center;" /></td>
                <td><input v-model="item.rpPrice" type="text" style="height: 40px;width: 100%;text-align: center;" />
                </td>
                <td><input v-model="item.date" type="date" style="height: 40px;width: 100%;text-align: center;" />
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <el-button type="primary" @click="submitForm()">
        确认定价
    </el-button>


    <!-- 选择产品 -->
    <el-dialog v-model="dialogProductTypeSelect" title="选择产品" width="700" :before-close="ProductTypeSelectOver">
        <template #footer>
            <div class="dialog-footer">
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="productId" label="序号" width="100" align="center" />
                    <el-table-column prop="pCharacteristic" label="标识" width="100" align="center" />
                    <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                    <el-table-column prop="pName" label="物品名称" align="center" />
                    <el-table-column prop="ptClass" label="所属类别" align="center" />
                </el-table>
                <br>
                <el-button type="success" @click="ProductSelectOk()">确认</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 供应商弹出层 -->
    <el-dialog v-model="dialogVisible3" title="供应商选择" width="700" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="tableDataven" border style="width: 100%" @selection-change="handleSelectionChanges">
                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" type="index" />
                <el-table-column prop="vName" label="供应商名称" />
                <el-table-column prop="vContact" label="联系人" />
                <el-table-column prop="vPhone" label="手机号码" />
            </el-table>
            <el-button type="success" @click="dialogVisible3 = false">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import http from '../../../http.js';
import { fa } from 'element-plus/es/locales.mjs';
import { useRouter } from 'vue-router';
const router = useRouter()
import { useRoute } from 'vue-router';
const route = useRoute()

onMounted(() => {
    GetProduct()
    table()
    peSetInfo()
})

//表单参数
const ruleForm = reactive({
    "dto": {
        procureEnquiryId: 0,
        "peDocumentsNumber": "自动生成",
        "pePricingPeople": "",
        "peInquiryClerk": "",
        "peInquiryDate": "",
        "productId": '',
        "peNum": '',
        "pePrice": '',
        "peTaxRate": '',
        "addName": "zs",
        "addTime": "2024-12-18T14:03:49.919Z",
        "office_Id": "1",
        "user_Id": 1,
        "isState": false,
        "dtos": [
            {
                "vendorName": "",
                "vendorNum": '',
                "vendorPrice": '',
                "sumPrice": '',
                "deliveryDate": "",
                "addName": "",
                "addTime": "2024-12-18T14:03:49.919Z",
                "office_Id": "string",
                "user_Id": 1
            }
        ]
    },
    "ppdtoo": {
    "addName": "string",
    "addTime": "2024-12-20T07:36:07.400Z",
    "updName": "string",
    "updTime": "2024-12-20T07:36:07.400Z",
    "delName": "string",
    "delTime": "2024-12-20T07:36:07.400Z",
    "isDel": false,
    "office_Id": "string",
    "user_Id": 0,
    "purchasePricingId": 0,
    "procureEnquiryId": route.query.id,
  }
})
console.log(ruleForm.ppdtoo)
// 新增
const submitForm = () => {
    axios.post(http.zblnb + '/cg/api/ProcureEnquiry/PricingAdd', {
        ppdtoo: ruleForm.ppdtoo
    })
        .then((res) => {
            if (res.data.data == 1) {
                ElMessage.success("定价成功")
                router.push('/ProcureEnquirySelect')
            } else {
                ElMessage.error("定价失败")
            }
        })
}

// 询价产品
const tableDatas = ref([{
    PNumber: '',
    PName: '',
    PENum: '',
    PEPrice: '',
    PETaxRate: '',
    ProductId: ''
}])

const tableAdd = reactive({
    PNumber: '',
    PName: '',
    PENum: '',
    PEPrice: '',
    PETaxRate: '',
    ProductId: ''
})
const dialogProductTypeSelect = ref(false)
//新增产品分类下拉弹出层关闭弹出层
const ProductTypeSelectOver = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//多选框赋值
const Duo = ref([])
const handleSelectionChange = (val: any) => {
    Duo.value = val
}
//获取产品列表
const tableData = ref([])
const GetProduct = () => {
    axios.get(http.zblnb + '/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: 1,
            PageSize: 100,
            PName: '',
            PNumber: '',
            Office_Id: '',
            ProductTypeId: 0
        }
    })
        .then(res => {
            tableData.value = res.data.data.list
        })
        .catch(err => {
            console.log(err)
        })
}

//关闭弹出层反填
const ProductSelectOk = () => {
    tableAdd.PName = Duo.value[0].pName
    tableAdd.PNumber = Duo.value[0].pNumber
    tableAdd.ProductId = Duo.value[0].productId
    dialogProductTypeSelect.value = false
}

//多选框
const check1 = ref([])
//全选
const ids = ref([])
const selectAll = ref(false)
const toggleSelectAll = () => {
    ids.value = []
    if (selectAll.value) {
        ids.value = check1.value.map(ele => ele.productId)
        console.log(ids.value)
    }

}
const dialogVisible3 = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

//供应商多选框
const handleSelectionChanges = (val: any) => {
    check1.value = val
};

// //点击新增行
// const addhang = () => {
//     check1.value.push({
//         vName: '',
//         vContact: '',
//         vPhone: '',
//         rPNum: '',
//         rpPrice: ''
//     });
// }
//供应商显示
var tableDataven = ref([]);
const table = () => {
    axios.get(http.zblnb + '/cg/api/Vendor/ProductTypeSelectShow', {
        params: {
            PageIndex: 1,
            PageSize: 100
        }
    }).then(res => {
        if (res.data.code == 200) {
            tableDataven.value = res.data.data.list
        }
        console.log(tableDataven.value)
    })
}

//反填
const peSetInfo = () => {
    axios.post(http.zblnb + '/cg/api/ProcureEnquiry/ProcureEnquirySet?id=' + route.query.id)
        .then(res => {
            let a = res.data.data
            ruleForm.dto.pePricingPeople = a.pePricingPeople
            ruleForm.dto.peInquiryClerk = a.peInquiryClerk
            ruleForm.dto.peInquiryDate = a.peInquiryDate
            ruleForm.dto.productId = a.productId
            tableAdd.PName = a.pName
            tableAdd.PNumber = a.pNumber
            tableAdd.PEPrice = a.pePrice
            tableAdd.PETaxRate = a.peTaxRate
            tableAdd.PENum = a.peNum
            check1.value = a.dtos

            //修改反填必要参数
            ruleForm.dto.peDocumentsNumber = a.peDocumentsNumber
            ruleForm.dto.addName = a.addName
            ruleForm.dto.addTime = a.addTime
            ruleForm.dto.office_Id = a.office_Id
            ruleForm.dto.peNum = a.peNum
            ruleForm.dto.pePrice = a.pePrice
            ruleForm.dto.peTaxRate = a.peTaxRate
            ruleForm.dto.procureEnquiryId = a.procureEnquiryId
            ruleForm.dto.productId = a.productId
        })
}
</script>

<style></style>